iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
自我挑戰組

溫故知新 JavaScript系列 第 17

Day17- 控制判斷 if、else if、switch

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20200930/20129439oVz40y5QVr.jpg
今天跟大家分享另一種控制判斷,讓程式自己去判斷該不該去執行某一件事情的方法,首先先介紹 if 。

if

控制判斷的寫法是這樣的,我們把 if 寫在最一開始括號內就是寫要判斷的條件,如果括號內條件成立,那就執行吃東西這個函式,所以第一行為判斷式、第二行為陳述式。

再來我們來看看這個程式碼你覺得結果會不會執行吃東西呢?

var hungry = "不餓";
if(hungry == "很餓"){
   eat();
}

答案是不是顯而易見,因為最上方的變數存放的是不餓,程式就不會繼續執行,此時又有一個問題!如果條件不成立程式不執行 eat 那要執行甚麼呢?總不能卡在這邊吧,所以可以在後面加上 else,請看這段程式碼:

var hungry = "不餓";
if(hungry == "很餓"){
   eat();
}else{
   console.log("我現在不想吃東西,走吧!");
}

如果條件不成立不執行 eat() ,那在後面可以接上 else 告訴程式如果條件不成立就執行『我現在不想吃東西,走吧!』這段話。

else if

但是現實世界中哪有這麼單純,更多的情況是我不太餓喝湯就好,我不餓但我很渴我想喝飲料,沒錯現實世界不是非黑即白更多是灰色、深黑、淺黑好啦~扯遠了!

那如果是多種條件該怎麼寫呢,這時候就用 else if 直接來看下面的範例:

也就是只要在後面接 else if 在運用前幾章節說的比較運算子,讓他去判斷每個 else if 括號內的條件是否成立,如果成立就執行,不成立就再去比對其他的條件,直到有一個條件符合就執行哪一個程式,這邊附上 DEMO 大家可以去改變一開始變數的數值,去看看會輸出什麼結果。

switch

其實最後一個 switch 跟 else if 有一點雷同他的語法結構是這樣的:

var light = 'red';

switch(light){
    case 'red':
    alert('紅色警戒');
    break;
    
    case 'blue':
    alert('藍色警戒');
    break;
    
    default:
    alert('沒有任何警報');
    break;
}

一開始先寫 switch 在前面後面括號放要判斷的條件,在執行裡面的程式碼,case 則是它會去比對是否有符合,沒有符合就繼續往下比對別的 case,如果有符合就會直接中斷停止後面的程式,所以後面要寫一個 break,至於後面的 default 就很像是前面提到的 else 一樣如果都沒有符合就執行這個程式。

補充說明

在效能上因為 else if 會一一個比對每個條件,switch 則是一找到符合的條件就會中斷後面的程式,所以如果比對的條件比較多的話 switch 的效能是比較好的。
今天就介紹到這邊,明天換說說迴圈囉!


上一篇
Day16- 控制判斷- 邏輯運算子
下一篇
Day18- 關於迴圈
系列文
溫故知新 JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言